@import "../../style/public";

.header {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
  background: #fff;
  color: #333;
  @include remCalc(font-size, 36);
  @include remCalc(line-height, 88);
  @include remCalc(padding, 0, 30);
  @include thin-border(false, false, bottom);
  @include remCalc(padding-top, 40);
  &.gradual{
    color:#fff;
    background-image: linear-gradient(315deg, rgba(10,141,254,0.82) 0%, rgba(73,75,255,0.82) 100%);
    &::after{
      border-bottom: 1px solid transparent;
    }
  }
  a {
    display: block;
    color: inherit;
  }
  .left {
    color: #121f33;
    @include remCalc(font-size, 30);
    text-align: left;
    .zhk-nav_back {
      @include remCalc(font-size, 30);
      position: relative;
      @include remCalc(top, 2);
      display: inline-block;
      @include remCalc(width, 26);
      @include remCalc(height, 36);
    }
    @include remCalc(width, 160);
    // @extend %text-overflow;
    position: relative;
    &::after{
      content: ""; 
      position: absolute;
      top:0;
      bottom:0;
      @include remCalc(left, -30);
      @include remCalc(right, -30);
    }
  }
  .middle {
    text-align: center;
    flex: 1;
    @extend %text-overflow;
    i{
      color: #999;
      position: relative;
      @include remCalc(top, 4);
    }
  }
  .right {
    color: $color-red;
    @include remCalc(font-size, 30);
    text-align: right;
    @include remCalc(width, 160);
    //@extend %text-overflow;
    position: relative;
    &.rightDisabled{
      color:#ddd;
    }
    &::after{
      content: ""; 
      position: absolute;
      top:0;
      bottom:0;
      @include remCalc(left, -30);
      @include remCalc(right, -30);
    }
    &.disabled {
      color: #d2d2d2 !important;
      background: transparent !important;
    }
    i {
      @include remCalc(font-size, 36);
    }
    .bigIcon {
      display: inline-block;
      @include remCalc(width, 60);
      @include remCalc(height, 60);
    }
  }
  .slot2{
    @extend .right;
    width:auto;
    z-index: 2;
    i{
      @include remCalc(padding-left, 20);
    }
    &::after{
      content: ""; 
      position: absolute;
      top:0;
      bottom:0;
      left:0;
      @include remCalc(right, -30);
    }
  }
}
